<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Helper Functions ---

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy, headlen) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.closePath();
        }

        // Helper function to draw filled arrow
        function drawFilledArrow(fromx, fromy, tox, toy, headlen) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }


        // --- Drawing Parameters ---
        const scale = 4;
        const originX = 120;
        const originY = 500;
        const mainLineWidth = 4;
        const thinLineWidth = 1.5;

        // --- Coordinates ---
        const Ax = originX;
        const Ay = originY - 90 * scale;
        const Cx = originX;
        const Cy = originY;
        const Dx = originX + 45 * scale;
        const Dy = Ay;
        const Bx = originX + (45 + 45) * scale;
        const By = Ay;
        // Place E between A and D, as in the diagram
        const Ex = originX + 25 * scale;
        const Ey = Ay;

        // --- Drawing ---

        // 1. Draw Wall
        ctx.save();
        ctx.lineWidth = thinLineWidth;
        const wallWidth = 30;
        const hatchStep = 10;
        // Clip region for hatching
        ctx.beginPath();
        ctx.rect(Ax - wallWidth, Ay, wallWidth, Cy - Ay);
        ctx.clip();
        // Draw hatching lines
        ctx.beginPath();
        for (let i = Ay - wallWidth; i < Cy; i += hatchStep) {
            ctx.moveTo(Ax - wallWidth, i);
            ctx.lineTo(Ax, i + wallWidth);
        }
        ctx.stroke();
        ctx.restore();
        // Draw the main wall line
        ctx.lineWidth = mainLineWidth;
        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Cx, Cy);
        ctx.stroke();

        // 2. Draw Structures (Beam and Rod)
        ctx.lineWidth = mainLineWidth;
        // Beam AB
        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Bx, By);
        ctx.stroke();
        // Rod CD
        ctx.beginPath();
        ctx.moveTo(Cx, Cy);
        ctx.lineTo(Dx, Dy);
        ctx.stroke();

        // 3. Draw Joints (Circles)
        const jointRadius = 6;
        const jointFillRadius = 4;

        [A, B, C, D].forEach(p => {
            let px, py;
            if (p === A) { px = Ax; py = Ay; }
            if (p === B) { px = Bx; py = By; }
            if (p === C) { px = Cx; py = Cy; }
            if (p === D) { px = Dx; py = Dy; }
            ctx.beginPath();
            ctx.arc(px, py, jointRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
        });
        
        [A,C,D].forEach(p => {
             let px, py;
            if (p === A) { px = Ax; py = Ay; }
            if (p === C) { px = Cx; py = Cy; }
            if (p === D) { px = Dx; py = Dy; }
            ctx.beginPath();
            ctx.arc(px, py, jointFillRadius, 0, 2 * Math.PI);
            ctx.fillStyle = 'black';
            ctx.fill();
        });


        // 4. Draw Forces
        const forceLength = 80;
        const arrowHeadLength = 20;
        // Force P at B
        drawFilledArrow(Bx, By, Bx, By + forceLength, arrowHeadLength);
        // Force Q at E
        drawFilledArrow(Ex, Ey, Ex, Ey + forceLength, arrowHeadLength);

        // 5. Draw Axes
        ctx.lineWidth = thinLineWidth;
        // Y-axis
        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Ax, Ay - 40);
        ctx.stroke();
        // X-axis
        ctx.beginPath();
        ctx.moveTo(Cx, Cy);
        ctx.lineTo(Cx + 40, Cy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(Cx + 45, Cy);
        ctx.lineTo(Cx + 85, Cy);
        ctx.setLineDash([5, 5]);
        ctx.stroke();
        ctx.setLineDash([]);


        // 6. Draw Dimensions and Angle
        ctx.lineWidth = thinLineWidth;
        const dimOffset = 40;
        const tickSize = 5;

        // Vertical dimension "90 cm"
        ctx.beginPath();
        ctx.moveTo(Ax - dimOffset, Ay);
        ctx.lineTo(Ax - dimOffset, Cy);
        ctx.moveTo(Ax - dimOffset - tickSize, Ay);
        ctx.lineTo(Ax, Ay);
        ctx.moveTo(Ax - dimOffset - tickSize, Cy);
        ctx.lineTo(Ax, Cy);
        drawArrow(Ax - dimOffset, Cy, Ax - dimOffset, Ay, 10);
        drawArrow(Ax - dimOffset, Ay, Ax - dimOffset, Cy, 10);
        ctx.stroke();

        // Horizontal dimensions "45 cm"
        ctx.beginPath();
        ctx.moveTo(Ax, Ay - dimOffset);
        ctx.lineTo(Bx, By - dimOffset);
        // Ticks
        ctx.moveTo(Ax, Ay - dimOffset + tickSize);
        ctx.lineTo(Ax, Ay);
        ctx.moveTo(Dx, Dy - dimOffset + tickSize);
        ctx.lineTo(Dx, Dy);
        ctx.moveTo(Bx, By - dimOffset + tickSize);
        ctx.lineTo(Bx, By);
        // Dots
        ctx.beginPath();
        ctx.arc(Dx, Dy - dimOffset, 2, 0, 2*Math.PI);
        ctx.arc(Bx, By - dimOffset, 2, 0, 2*Math.PI);
        ctx.fill();
        // Arrowheads
        drawArrow(Ax, Ay - dimOffset, Dx, Dy - dimOffset, 10);
        drawArrow(Dx, Dy - dimOffset, Ax, Ay - dimOffset, 10);
        drawArrow(Dx, Dy - dimOffset, Bx, By - dimOffset, 10);
        drawArrow(Bx, By - dimOffset, Dx, Dy - dimOffset, 10);
        ctx.stroke();

        // Angle "60°"
        const angleRadius = 40;
        const rodAngle = Math.atan2(Cy - Dy, Cx - Dx);
        const verticalAngle = Math.PI / 2; // Downward
        ctx.beginPath();
        ctx.arc(Dx, Dy, angleRadius, verticalAngle, rodAngle, false);
        ctx.stroke();
        // Arrow on arc
        const arrowAngle = rodAngle - 0.15;
        ctx.beginPath();
        ctx.moveTo(Dx + angleRadius * Math.cos(rodAngle), Dy + angleRadius * Math.sin(rodAngle));
        ctx.lineTo(Dx + (angleRadius - 8) * Math.cos(arrowAngle), Dy + (angleRadius - 8) * Math.sin(arrowAngle));
        ctx.lineTo(Dx + (angleRadius + 8) * Math.cos(arrowAngle), Dy + (angleRadius - 3) * Math.sin(arrowAngle));
        ctx.stroke();
        // Dotted helper line for angle
        ctx.beginPath();
        ctx.setLineDash([3, 4]);
        ctx.moveTo(Dx, Dy);
        ctx.lineTo(Dx, Dy + angleRadius + 10);
        ctx.stroke();
        ctx.setLineDash([]);


        // 7. Draw Labels
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Point Labels
        ctx.fillText('A', Ax - 18, Ay);
        ctx.fillText('B', Bx + 20, By);
        ctx.fillText('C', Cx - 20, Cy + 15);
        ctx.fillText('D', Dx + 15, Dy - 15);
        ctx.fillText('E', Ex, Ey - 18);

        // Force Labels
        ctx.fillText('P', Bx, By + forceLength + 20);
        ctx.fillText('Q', Ex - 15, Ey + forceLength + 10);

        // Axis Labels
        ctx.fillText('y', Ax - 20, Ay - 30);
        ctx.fillText('x', Cx + 100, Cy + 15);

        // Dimension Labels
        ctx.save();
        ctx.translate(Ax - dimOffset - 15, (Ay + Cy) / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('90 cm', 0, 0);
        ctx.restore();

        ctx.fillText('45 cm', (Ax + Dx) / 2, Ay - dimOffset - 15);
        ctx.fillText('45 cm', (Dx + Bx) / 2, By - dimOffset - 15);
        
        // Angle Label
        const angleTextAngle = (verticalAngle + rodAngle) / 2;
        ctx.fillText('60°', Dx + (angleRadius + 15) * Math.cos(angleTextAngle + 0.1), Dy + (angleRadius + 15) * Math.sin(angleTextAngle + 0.1));
    </script>
</body>
</html>